<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2024-01-12 09:37:32
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-01-21 19:48:38
-->
<template>
  <div class="cr-message-popup">
    <div class="cr-message-popup-header">
      <div class="title">
        <cr-icon name="xiaoxi" class="icon" />
        <span>系统消息</span>
      </div>
      <div class="action"></div>
    </div>
    <div class="cr-message-popup-wrapper">
      <div class="cr-message-popup-toolbar">
        <div class="title">未读消息({{ messageSummary.unreadNumber }})</div>
        <div class="sub" v-show="messageSummary.totalCount > 0">
          当前共 {{ messageSummary.totalCount }} 条消息
        </div>
        <div class="action">
          <a-space>
            <a-button
              type="link"
              :class="currentStatus === 0 ? 'active' : ''"
              size="small"
              @click="currentStatus = 0"
            >
              全部
            </a-button>
            <a-button
              type="link"
              size="small"
              :class="currentStatus === 1 ? 'active' : ''"
              @click="currentStatus = 1"
            >
              未读
            </a-button>

            <a-button
              type="primary"
              size="small"
              @click="setReadAllMessage"
              v-show="messageSummary.unreadNumber"
              >全部设置已读
            </a-button>
            <a-button
              type="primary"
              size="small"
              @click="clearAllMessage"
              v-show="messageItems.length"
              >清空消息
            </a-button>
          </a-space>
        </div>
      </div>
      <div class="cr-message-popup-content">
        <div class="cr-message-popup-list">
          <a-spin
            :spinning="messageLoading"
            tip="消息数据加载中~"
            class="cr-message-loading"
          >
            <a-icon
              slot="indicator"
              type="loading"
              style="font-size: 24px"
              spin
            />
            <a-empty
              style="margin-top: 30px"
              :imageStyle="{ height: '80px' }"
              v-if="!messageItems.length"
            >
              <template #description>
                <span style="color: #666">暂无通知消息数据</span>
              </template>
            </a-empty>
            <div
              class="cr-message-item"
              v-for="(item, index) in messageItems"
              :key="index"
            >
              <div class="cr-message-item-header">
                <div class="avator">
                  <a-avatar style="background-color: #3c8dbc99">
                    <template #icon>
                      <UserOutlined />
                    </template>
                  </a-avatar>
                </div>
                <div class="text">
                  {{ item.title }}
                  <a-badge dot v-show="!item.isRead" />
                </div>
              </div>
              <div class="cr-message-item-wrapper">
                <div class="desc">
                  {{ item.description }}
                </div>
                <div class="sub">
                  提交时间：{{ formatDate(item.creationTime) }}
                </div>
                <div class="action">
                  <a-button
                    type="link"
                    size="small"
                    class="btn-view"
                    @click="viewItem(item)"
                  >
                    {{ hasUrl(item) ? "查看详情" : "设置已读" }}
                  </a-button>
                </div>
              </div>
            </div>
          </a-spin>
        </div>
        <div class="cr-message-popup-sider" v-show="false">
          <a-button size="small" class="btn active">全部 </a-button>
          <a-button
            size="small"
            class="btn"
            v-for="(item, index) in categoryList"
            :key="index"
            >{{ item.name }}
            <a-badge dot v-show="item.unReadNum"></a-badge>
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import dayjs from "dayjs";
import { UserOutlined } from "@ant-design/icons-vue";
import { executeMethodAsync, getNotificationUrl } from "@/plugins/signlr";
import { useRouter } from "vue-router";
const messageLoading = ref(false);
const currentStatus = ref(0);
const router = useRouter();
const props = defineProps({
  items: { type: Array, required: true },
});

const hasUrl = (item) => {
  return (item.type > 0 && item.type <= 8) || item.url;
};

const messageItems = computed(() => {
  if (currentStatus.value === 0) {
    return props.items as Array<any>;
  } else {
    return props.items.filter((x: any) => !x.isRead) as Array<any>;
  }
});

const messageSummary = computed(() => {
  return {
    unreadNumber: props.items.filter((x: any) => !x.isRead).length,
    totalCount: props.items.length,
  };
});

const categoryList = ref<Array<any>>([
  { id: "1", name: "待办审批任务" },
  { id: "2", name: "项目下发任务" },
  { id: "3", name: "项目审批取消" },
  { id: "4", name: "项目审批完成" },
]);

const formatDate = (date: Date | string) => {
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
};

/**
 * 全部设置为已读
 */
const setReadAllMessage = async () => {
  await executeMethodAsync("ReadAllAsync");
  props.items.map((x: any) => {
    x.isRead = true;
  });
};

/**
 * 清空消息
 */
const clearAllMessage = async () => {
  await executeMethodAsync("ClearAllAsync");
  await executeMethodAsync("GetNotificationsAsync");
};

/**
 * 查看消息
 * @param item
 */
const viewItem = async (item: any) => {
  await executeMethodAsync("SetReadAsync", item.id);
  item.isRead = true;
  let url = getNotificationUrl(item);
  if (url) {
    router.push(url);
  }
};
</script>

<style lang="less" scoped>
.cr-message-popup {
  width: 480px;
  height: calc(100vh - 150px);
  min-height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &-header {
    background-color: #3c8dbc;
    padding: 8px;
    color: hsla(0, 0%, 100%, 0.85);
    display: flex;
    font-size: 16px;

    > .title {
      flex: 1;
    }

    i.icon,
    span.icon {
      margin: 0 5px;
      font-size: 20px;
      opacity: 0.8;
      font-weight: bold;

      &:hover {
        opacity: 1;
      }
    }
  }

  &-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  &-toolbar {
    border-bottom: 1px solid #eeeeee;
    padding: 8px 8px 8px 12px;
    display: flex;

    .title {
      flex: 1;
      font-size: 17px;
      font-weight: 500;
    }

    .sub {
      padding-right: 10px;
    }
  }

  &-content {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  &-list {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    padding: 16px;

    .cr-message-item {
      padding: 12px 0;
      text-align: left;

      &-header {
        display: flex;
        align-items: center;

        .text {
          padding-left: 10px;
        }
      }

      &-wrapper {
        margin-top: 10px;
        padding: 12px 12px 8px;
        background: #f5f5f5;
        border-left: 4px solid #3c8dbc;
        border-radius: 5px;

        .desc {
          padding: 4px 0 8px;
          line-height: 20px;
        }

        .action {
          text-align: right;

          .btn-view {
            color: #3c8dbc;

            &:hover {
              border: none;
            }
          }
        }
      }
    }
  }

  &-sider {
    border-left: 1px solid #dddddd;
    width: 180px;
    padding: 10px 0 5px 2px;

    .btn {
      margin: 0 0 10px 8px;
      width: 75px;
      padding: 0;
      text-align: center;
      overflow: hidden;

      &.active {
        border: 1px solid #3c8dbc;
      }
    }
  }
}

.cr-message-loading {
  display: block;
  text-align: center;
}
</style>
